<template>
    <div class="pad20">
        <div>
            <el-form :inline="true" :model="map" size="mini">
                <el-form-item label="商品名称：" >
                    <el-input v-model.trim="map.gname"></el-input>
                </el-form-item>

                <el-form-item label="商品类别" prop="typeId">
                    <el-select v-model="map.id" placeholder="请选择商品类型">
                        <el-option v-for="type in goods" :label="type.typename" :value="type.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
                    <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
                    <el-button  type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addSubject">添加</el-button>
<!--                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addSubject(0,0)">添加</el-button>-->
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    border
                    row-key="id"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                    :default-expand-all="false">
                <el-table-column
                        prop="id"
                        label="编号"
                        width="170"
                      >
                </el-table-column>
                <el-table-column
                        prop="gname"
                        label="商品名称"
                        width="80"
                        >
                </el-table-column>
                <el-table-column
                        prop="img"
                        label="商品图片"
                        width="80"
                >
                    <template slot-scope="scope">
                        <el-popover placement="right" trigger="hover">
                            <img :src="scope.row.img" width="250" height="200">
                            <img slot="reference" :src="scope.row.img"  style="width:70px;height:35px">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="商品描述"
                        width="80"
                >
                </el-table-column>
                <el-table-column
                        prop="code"
                        label="商品编码"
                        width="80"
                >
                </el-table-column>
                <el-table-column

                        prop="typename"
                        label="商品类别"

                        >
                </el-table-column>
                <el-table-column

                        prop="gsname"
                        label="商品规格"
                >
                </el-table-column>
                <el-table-column

                        prop="gbname"
                        label="商品品牌"
                >
                </el-table-column>
                <el-table-column

                        prop="gdname"
                        label="存储方式"
                >
                </el-table-column>
                <el-table-column

                        prop="gmtCreate"
                        label="创建时间"
                >
                </el-table-column>
                <el-table-column

                        prop="gmtModified"
                        label="更新时间"
                >
                </el-table-column>

                <el-table-column label="操作"

                                >
                    <template slot-scope="scope">
<!--                        <el-button  type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addSubject(scope.row.parentId,scope.row.id)">添加</el-button>-->
                        <el-button  type="danger" @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
                        <el-button  type="success" @click="editSubject(scope.row)" size="mini">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--添加分类的对话框-->
            <el-dialog
                    title="添加分类"
                    :visible.sync="addDialogVisible"
                    width="30%"
                    @closed="closeCllback"
            >
                <!--添加的表单的数据绑定-->
                <el-form :model="addSubjectFormData" :rules="addSubjectFormRule" ref="addSubjectFormRef"  label-width="100px" class="demo-ruleForm">

                    <el-form-item label="图片" prop="img">
                        <div>
                            <el-upload
                                    class="avatar-uploader"
                                    action="http://192.168.1.42:82/system/tbBusiness/upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload"
                            >
                                <img style="height: 50px;width: 200px" v-if="addSubjectFormData.img" v-model="addSubjectFormData.img" :src="addSubjectFormData.img" class="avatar" alt="">
                                <i v-else  class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>

                    <el-form-item label="商品名称:" prop="gname">
                        <el-input type="text" v-model="addSubjectFormData.gname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品描述:" prop="description">
                        <el-input type="text" v-model="addSubjectFormData.description" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编码:" prop="code">
                        <el-input type="text" v-model="addSubjectFormData.code" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类别" prop="typeId">
                        <el-select v-model="addSubjectFormData.typeId" placeholder="请选择商品类型">
                            <el-option v-for="type in goods" :label="type.typename" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品规格" prop="gsid">
                        <el-select v-model="addSubjectFormData.gsid" placeholder="请选择规格">
                            <el-option v-for="type in speci" :label="type.gsname" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品品牌" prop="gbid">
                        <el-select v-model="addSubjectFormData.gbid" placeholder="请选择品牌">
                            <el-option v-for="type in brand" :label="type.gbname" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="存储方式" prop="gdid">
                        <el-select v-model="addSubjectFormData.gdid" placeholder="请选择存储方式">
                            <el-option v-for="type in storage" :label="type.gdname" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>
<!--                    <el-form-item label="备注:" prop="remark">-->
<!--                        <el-input type="text" v-model="addSubjectFormData.remark" autocomplete="off"></el-input>-->
<!--                    </el-form-item>-->
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="insertUser">确 定</el-button>
            </span>
            </el-dialog>

            <!--编辑分类的对话框-->
            <!--弹窗-->
            <el-dialog
                    width="35%"
                    title="编辑"
                    :visible.sync="editDialogVisible"
                    :before-close="closeCllback1">
                <el-form :model="editSubjectFormData" :rules="addSubjectFormRule" ref="editformData" label-width="100px">
                    <el-form-item label="广告图片:" prop="img">
                        <div>
                            <el-upload
                                    class="avatar-uploader"
                                    action="http://192.168.1.42:82/system/tbBusiness/upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess01"
                                    :before-upload="beforeAvatarUpload"
                            >
                                <img style="height: 50px;width: 200px" v-if="editSubjectFormData.img" v-model="editSubjectFormData.img" :src="editSubjectFormData.img" class="avatar" alt="">
                                <i v-else  class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>
                    <el-form-item label="商品名称:" prop="gname">
                        <el-input v-model="editSubjectFormData.gname" ></el-input>
                    </el-form-item>
                    <el-form-item label="商品描述:" prop="description">
                        <el-input type="text" v-model="editSubjectFormData.description" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品编码:" prop="code">
                        <el-input type="text" v-model="editSubjectFormData.code" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类别" prop="typeId">
                        <el-select v-model="editSubjectFormData.typeId" placeholder="请选择商品类型">
                            <el-option v-for="type in goods" :label="type.typename" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品规格" prop="gsid">
                        <el-select v-model="editSubjectFormData.gsid" placeholder="请选择规格">
                            <el-option v-for="type in speci" :label="type.gsname" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品品牌" prop="gbid">
                        <el-select v-model="editSubjectFormData.gbid" placeholder="请选择品牌">
                            <el-option v-for="type in brand" :label="type.gbname" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="存储方式" prop="gdid">
                        <el-select v-model="editSubjectFormData.gdid" placeholder="请选择存储方式">
                            <el-option v-for="type in storage" :label="type.gdname" :value="type.id"></el-option>
                        </el-select>
                    </el-form-item>



                </el-form>
                <el-row style="margin-top:17px; ">
                    <el-button style="float:right;margin-left:6px;" size="mini" type="danger" @click="editDialogVisible=false" >取 消</el-button>
                    <el-button style="float:right" size="mini" type="primary" @click="updateSubject">确定</el-button>
                </el-row>
            </el-dialog>





            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    //import * as api from '@/api/course'
/*    import Add from './add'
    import Edit from './edit'*/
    export default {
        // components: { Add, Edit },
        data() {
            return {


                storage:[],
                brand:[],
                speci:[],
                goods:[],
                //当前页数
                currentPage:1,
                pageSizes:[5,10,15,20],
                //每页显示的条数
                pageSize:5,
                //总条数
                total:0,

                map: {
                },
                formData: {},
                tableData: [],
                expands: [],
                addSubjectFormData: {


                },
                editSubjectFormData:{

                },
                addDialogVisible: false,
                editDialogVisible:false,
             
                    statusIdList: [{
                        code: 1,
                        desc:"正常"
                    },{
                        code: 0,
                        desc:"禁用"
                    }]
                ,
                img:'',

                //表单验证
                addSubjectFormRule:{
                    img:[
                        { required: true, message: '请上传图片', trigger: 'blur',autocomplete: 'on'}

                    ],
                    gname: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' },

                    ],
                    code: [
                        { required: true, message: '请输入商品编码', trigger: 'blur' },

                    ],
                    typeId: [
                        { required: true, message: '请选择商品类别', trigger: 'blur' }
                    ],
                    gsid: [
                        { required: true, message: '请选择商品规格', trigger: 'blur' }
                    ],
                    gbid: [
                        { required: true, message: '请选择商品品牌', trigger: 'blur' }
                    ],
                    gdid: [
                        { required: true, message: '请选择存储方式', trigger: 'blur' }
                    ],


                },
                editSubjectFormRule:{
                    title:[
                        {required:true,message:"分类名称不能为空",trigger:"blur"}
                    ]
                }
            }
        },
        created() {
            this.searchSubject()
            this.goodes()
          this.specification()
            this.brands()
           this.storages()
        },
        methods:{
            //上传前触发的方法
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //处理图片
            handleAvatarSuccess(res,file){
                this.addSubjectFormData.img=res.data;
            },
            handleAvatarSuccess01(res,file){
                this.editSubjectFormData.img=res.data;
            },
            //查询所有存储方式
            storages(){
                this.$http.post("/goods/goodsStorage/select").then(resule => {
                    this.storage=resule.data.data
                })
            },
            //查询所有品牌
         brands(){
                this.$http.post("/goods/goodsBrand/select").then(resule => {
                this.brand=resule.data.data
             })
         },
               //查询所有规格
            specification(){
              this.$http.post("/goods/goodsSpecification/select").then(resule => {
                  this.speci=resule.data.data
              })
            },
            //查询所有类别
            goodes() {
                this.$http.post('/goods/goodsType/select').then(resule => {
                  //  console.log(resule)
                    this.goods=resule.data.data
                })
            },
            //编辑分类框
            editSubject(row){
                this.editDialogVisible = true
                this.editSubjectFormData = row
            },
            //添加分类框
            addSubject(parentId,id){
                this.addDialogVisible = true
                this.addSubjectFormData.parentId = parentId
                this.addSubjectFormData.id = id
            },
            //每页显示的条数发生改变时触发
            handleSizeChange(val) {
                this.pageSize=val;
                this.searchSubject()
            },
            //当前页码发生改变时触发
            handleCurrentChange(val) {
                this.currentPage=val;
                this.searchSubject()
            },
            // 查询条件
            handleCheck() {
                this.searchSubject()
            },
            // 重置查询条件
            handleReset() {
                this.searchSubject()
                this.goodes()
                this.map={}
            },
            // 修改状态
            handleChangeStatusId(id, statusId,parentId) {
                const title = { 1: '正常', 0: '禁用' }
                this.$confirm(`确定要${title[statusId]}吗?`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.changeStatusId(id, statusId,parentId)
                    this.reload()
                }).catch(() => {
                    this.reload()
                })
            },
            // 请求更新状态方法
            changeStatusId(id, statusId,parentId) {
                //alert(statusId)
                var that =this
                this.$http.post(`/core/subject/changeStatusId`, {"id":id,"statusId":statusId,"parentId":parentId}).then(function (resp) {
                    if (resp.data.code==200){
                        that.$message.success(resp.data.msg);
                        that.reload()
                    }
                })
            },
            // 商品信息分页列表接口
            searchSubject(){
                var that =this
                this.$http.post('/goods/goods/selectgoods/'+this.currentPage+"/"+this.pageSize,this.map).then(function (resp) {
                            that.tableData=resp.data.data.records
                           that.total=resp.data.data.total
                })
            },
            //添加分类方法
            insertUser(){
                this.$refs["addSubjectFormRef"].validate((valid) => {
                    if (valid) {
                        var that = this
                        //console.log(this.addSubject())
                        that.addDialogVisible = false
                        this.$http.post(`/goods/goods/insert`, this.addSubjectFormData).then(function (resp) {
                            console.log(resp)
                            if (resp.data.code == 2000) {
                                that.$message.success(resp.data.msg);
                                that.addDialogVisible = false
                            }else if (resp.data.code == 5000){
                                that.$message.error(resp.data.msg);
                            }
                        })
                    }
                })
            },
            //修改分类的方法

            updateSubject(){
                this.$refs["editformData"].validate((valid) => {
                    if (valid) {
                        var that = this
                        that.editDialogVisible = false
                        this.$http.post(`/goods/goods/update`, this.editSubjectFormData).then(function (resp) {
                           // console.log(resp)
                            that.searchSubject()
                            if (resp.data.code == 2000) {
                                that.searchSubject()
                                that.$message.success(resp.data.msg);

                            }
                        })
                    }
                })
            },
            // 关闭弹窗回调
            closeCllback() {
                this.addDialogVisible = false
                this.$refs.addSubjectFormRef.resetFields();
                this.reload()
            },
            closeCllback1(){
                this.editDialogVisible = false
                this.$refs.editSubjectFormRef.resetFields();
                this.reload()
            },
            // 删除
            handleDelete(id) {
                if (confirm("确定删除吗")) {
                    var that = this;

                    //console.log(id);
                    this.$http.get("/goods/goods/deletegoods/"+id).then(function (result) {
                        that.searchSubject()
                        that.$message.success(result.data.msg)
                    })
                }
            },
            // 刷新当前页面
            reload() {
                this.searchSubject()
            },
            textClass(userType) {
                return {
                    c_red: userType === 0,
                    c_blue: userType === 2
                }
            }
        }
    }
</script>
